<template>
  <div id="pictureDetailPage">
    <ShareModal ref="shareModalRef" :link="shareLink" />
    <a-row :gutter="[16, 16]">
      <!-- 图片展示区 -->
      <a-col :sm="24" :md="16" :xl="18">
        <a-card title="图片预览">
          <a-image style="max-height: 600px; object-fit: contain" :src="picture.url" />
        </a-card>
      </a-col>
      <!-- 图片详情区 -->
      <a-col :sm="24" :md="8" :xl="6">
        <a-card title="图片详情">
          <a-descriptions :column="1">
            <a-descriptions-item label="作者">
              <a-space>
                <a-avatar :size="24" :src="picture.user?.userAvatar" />
                <div>{{ picture.user?.userName }}</div>
              </a-space>
            </a-descriptions-item>
            <a-descriptions-item label="名称">
              {{ picture.name ?? '未命名' }}
            </a-descriptions-item>
            <a-descriptions-item label="简介">
              {{ picture.introduction ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="分类">
              {{ picture.category ?? '默认' }}
            </a-descriptions-item>
            <a-descriptions-item label="标签">
              <a-tag v-for="tag in picture.tags" :key="tag">
                {{ tag }}
              </a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="格式">
              {{ picture.picFormat ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="宽度">
              {{ picture.picWidth ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="高度">
              {{ picture.picHeight ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="宽高比">
              {{ picture.picScale ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="大小">
              {{ formatSize(picture.picSize) }}
            </a-descriptions-item>
            <a-descriptions-item label="主色调">
              {{ picture.picColor ?? '-' }}
              <div
                class="picColor"
                v-if="picture.picColor"
                :style="{ backgroundColor: toHexColor(picture.picColor) }"
              />
            </a-descriptions-item>
          </a-descriptions>
          <!-- 操作按钮 -->
          <a-space wrap>
            <a-button v-if="canEdit" :icon="h(EditOutlined)" type="default" @click="doEdit">
              编辑
            </a-button>
            <a-button v-if="canDelete" :icon="h(DeleteOutlined)" danger @click="doDelete">
              删除
            </a-button>
            <a-button :icon="h(ShareAltOutlined)" ghost type="primary" @click="doShare">
              分享
            </a-button>
          </a-space>
          <a-button class="download-btn" type="primary" @click="doDownload">
            原图下载
            <template #icon>
              <CloudDownloadOutlined />
            </template>
          </a-button>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { computed, h, onMounted, ref } from 'vue'
import { deletePictureUsingPost, getPictureVoByIdUsingGet } from '@/api/pictureController'
import { message } from 'ant-design-vue'
import { downloadImage, formatSize, toHexColor } from '@/utils'
import router from '@/router'
import { EditOutlined, DeleteOutlined, CloudDownloadOutlined, ShareAltOutlined } from '@ant-design/icons-vue'
import ShareModal from "@/components/ShareModal.vue";
import {SPACE_PERMISSION_ENUM} from "@/constants/space";

// 上层传递过来的图片id
const props = defineProps<{
  id: string | number
}>()
const picture = ref<API.PictureVO>({})

/**
 * 获取图片详情
 */
const fetchPictureDetail = async () => {
  try {
    // 根据图片id获取图片信息
    const res = await getPictureVoByIdUsingGet({
      id: props.id,
    })
    if (res.data.code === 0 && res.data.data) {
      picture.value = res.data.data
    } else {
      message.error('获取图片详情失败，' + res.data.message)
    }
  } catch (e: any) {
    message.error('获取图片详情失败，' + e.message)
  }
}

onMounted(() => {
  fetchPictureDetail()
})

/**
 * 编辑和删除逻辑
 */
//编辑
const doEdit = () => {
  router.push({
    path: '/add_picture',
    query: {
      id: picture.value.id,
      spaceId: picture.value.spaceId,
    },
  })
}
//删除图片
const doDelete = async () => {
  const id = picture.value.id
  if (!id) {
    return
  }
  const res = await deletePictureUsingPost({ id })
  if (res.data.code === 0) {
    message.success('删除图片成功')
  } else {
    message.error('删除图片失败')
  }
}
//下载图片
const doDownload = () => {
  downloadImage(picture.value.baseUrl)
}

/**
 * 分享图片弹窗
 */
// 分享弹窗引用
const shareModalRef = ref();
// 分享连接
const shareLink = ref<string>();
// 分享
const doShare = () => {
  shareLink.value = `${window.location.protocol}//${window.location.host}/picture/${picture.value.id}`
  if(shareModalRef.value) {
    shareModalRef.value.openModal()
  }
}
/**
 * 通用权限校验函数
 */
function createPermissionChecker(permission: string) {
  return computed(() => {
    return (picture.value.permissionList ?? []).includes(permission)
  })
}

// 定义权限检查
const canEdit = createPermissionChecker(SPACE_PERMISSION_ENUM.PICTURE_EDIT)
const canDelete = createPermissionChecker(SPACE_PERMISSION_ENUM.PICTURE_DELETE)
</script>

<style scoped>
#pictureDetailPage {
}

.download-btn {
  width: 100%;
  margin: 20px auto 0;
}

#pictureDetailPage .picColor {
  width: 16px;
  height: 16px;
  margin-left: 3px;
}
</style>
